<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">Progress 进度条</div>
    </ons-toolbar>

    <div style="padding: 20px;">
        <h3>Progress Bar 进度条</h3>
        <p style="color: #666; line-height: 1.6;">
            进度条用于显示任务的完成进度。
        </p>

        <h3 style="margin-top: 30px;">确定进度</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-progress-bar value="30"></ons-progress-bar>
                </p>
                <p style="margin: 10px 0;">
                    <ons-progress-bar value="60"></ons-progress-bar>
                </p>
                <p style="margin: 10px 0;">
                    <ons-progress-bar value="100"></ons-progress-bar>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('progress-bar-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-progress-bar-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-progress-bar-code" onclick="event.stopPropagation(); copyCode('progress-bar-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-progress-bar-code">
                <pre><code id="code-content-progress-bar-code">&lt;!-- HTML --&gt;
&lt;ons-progress-bar value="30"&gt;&lt;/ons-progress-bar&gt;
&lt;ons-progress-bar value="60"&gt;&lt;/ons-progress-bar&gt;
&lt;ons-progress-bar value="100"&gt;&lt;/ons-progress-bar&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">不确定进度</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-progress-bar indeterminate></ons-progress-bar>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('indeterminate-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-indeterminate-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-indeterminate-code" onclick="event.stopPropagation(); copyCode('indeterminate-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-indeterminate-code">
                <pre><code id="code-content-indeterminate-code">&lt;!-- HTML --&gt;
&lt;ons-progress-bar indeterminate&gt;&lt;/ons-progress-bar&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">Progress Circular 圆形进度</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <div style="display: flex; justify-content: space-around; align-items: center; margin: 20px 0;">
                    <div style="text-align: center;">
                        <ons-progress-circular value="25"></ons-progress-circular>
                        <p style="margin-top: 10px; color: #666;">25%</p>
                    </div>
                    <div style="text-align: center;">
                        <ons-progress-circular value="50"></ons-progress-circular>
                        <p style="margin-top: 10px; color: #666;">50%</p>
                    </div>
                    <div style="text-align: center;">
                        <ons-progress-circular value="75"></ons-progress-circular>
                        <p style="margin-top: 10px; color: #666;">75%</p>
                    </div>
                    <div style="text-align: center;">
                        <ons-progress-circular value="100"></ons-progress-circular>
                        <p style="margin-top: 10px; color: #666;">100%</p>
                    </div>
                </div>
            </div>
            <div class="code-actions" onclick="toggleCode('circular-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-circular-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-circular-code" onclick="event.stopPropagation(); copyCode('circular-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-circular-code">
                <pre><code id="code-content-circular-code">&lt;!-- HTML --&gt;
&lt;ons-progress-circular value="25"&gt;&lt;/ons-progress-circular&gt;
&lt;ons-progress-circular value="50"&gt;&lt;/ons-progress-circular&gt;
&lt;ons-progress-circular value="75"&gt;&lt;/ons-progress-circular&gt;
&lt;ons-progress-circular value="100"&gt;&lt;/ons-progress-circular&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">不确定圆形进度</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <div style="text-align: center; margin: 20px 0;">
                    <ons-progress-circular indeterminate></ons-progress-circular>
                    <p style="margin-top: 10px; color: #666;">加载中...</p>
                </div>
            </div>
            <div class="code-actions" onclick="toggleCode('circular-indeterminate-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-circular-indeterminate-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-circular-indeterminate-code" onclick="event.stopPropagation(); copyCode('circular-indeterminate-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-circular-indeterminate-code">
                <pre><code id="code-content-circular-indeterminate-code">&lt;!-- HTML --&gt;
&lt;ons-progress-circular indeterminate&gt;&lt;/ons-progress-circular&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">动态进度示例</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-card>
                    <div class="title">文件下载</div>
                    <div class="content">
                        <p style="margin: 10px 0;">
                            <ons-progress-bar id="downloadProgress" value="0"></ons-progress-bar>
                        </p>
                        <p style="margin: 10px 0; text-align: center;">
                            <span id="progressText">0%</span>
                        </p>
                        <p style="text-align: center; margin-top: 15px;">
                            <ons-button id="startBtn" onclick="startDownload()">开始下载</ons-button>
                            <ons-button id="stopBtn" onclick="stopDownload()" disabled>停止</ons-button>
                        </p>
                    </div>
                </ons-card>
            </div>
            <div class="code-actions" onclick="toggleCode('dynamic-progress-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-dynamic-progress-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-dynamic-progress-code" onclick="event.stopPropagation(); copyCode('dynamic-progress-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-dynamic-progress-code">
                <pre><code id="code-content-dynamic-progress-code">&lt;!-- HTML --&gt;
&lt;ons-progress-bar id="downloadProgress" value="0"&gt;&lt;/ons-progress-bar&gt;
&lt;span id="progressText"&gt;0%&lt;/span&gt;
&lt;ons-button id="startBtn" onclick="startDownload()"&gt;开始下载&lt;/ons-button&gt;
&lt;ons-button id="stopBtn" onclick="stopDownload()" disabled&gt;停止&lt;/ons-button&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
var downloadInterval;
var currentProgress = 0;

function startDownload() {
    var progressBar = document.getElementById('downloadProgress');
    var progressText = document.getElementById('progressText');
    var startBtn = document.getElementById('startBtn');
    var stopBtn = document.getElementById('stopBtn');
    
    startBtn.disabled = true;
    stopBtn.disabled = false;
    currentProgress = 0;
    
    downloadInterval = setInterval(function() {
        currentProgress += Math.random() * 10;
        if (currentProgress &gt;= 100) {
            currentProgress = 100;
            clearInterval(downloadInterval);
            startBtn.disabled = false;
            stopBtn.disabled = true;
            ons.notification.toast('下载完成！', { timeout: 2000 });
        }
        progressBar.value = currentProgress;
        progressText.textContent = Math.round(currentProgress) + '%';
    }, 500);
}

function stopDownload() {
    if (downloadInterval) {
        clearInterval(downloadInterval);
        document.getElementById('startBtn').disabled = false;
        document.getElementById('stopBtn').disabled = true;
        ons.notification.toast('下载已停止', { timeout: 1500 });
    }
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">多任务进度</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-list>
                    <ons-list-item>
                        <div class="center">
                            <span class="list-item__title">任务 1</span>
                            <ons-progress-bar value="100" style="margin-top: 5px;"></ons-progress-bar>
                        </div>
                        <div class="right">
                            <ons-icon icon="md-check-circle" style="color: #50c878; font-size: 24px;"></ons-icon>
                        </div>
                    </ons-list-item>
                    <ons-list-item>
                        <div class="center">
                            <span class="list-item__title">任务 2</span>
                            <ons-progress-bar id="task2Progress" value="45" style="margin-top: 5px;"></ons-progress-bar>
                        </div>
                        <div class="right">
                            <span style="color: #666;">45%</span>
                        </div>
                    </ons-list-item>
                    <ons-list-item>
                        <div class="center">
                            <span class="list-item__title">任务 3</span>
                            <ons-progress-bar value="0" style="margin-top: 5px;"></ons-progress-bar>
                        </div>
                        <div class="right">
                            <span style="color: #999;">等待中</span>
                        </div>
                    </ons-list-item>
                </ons-list>
            </div>
            <div class="code-actions" onclick="toggleCode('multi-task-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-multi-task-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-multi-task-code" onclick="event.stopPropagation(); copyCode('multi-task-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-multi-task-code">
                <pre><code id="code-content-multi-task-code">&lt;!-- HTML --&gt;
&lt;ons-list&gt;
    &lt;ons-list-item&gt;
        &lt;div class="center"&gt;
            &lt;span class="list-item__title"&gt;任务 1&lt;/span&gt;
            &lt;ons-progress-bar value="100" style="margin-top: 5px;"&gt;&lt;/ons-progress-bar&gt;
        &lt;/div&gt;
        &lt;div class="right"&gt;
            &lt;ons-icon icon="md-check-circle" style="color: #50c878;"&gt;&lt;/ons-icon&gt;
        &lt;/div&gt;
    &lt;/ons-list-item&gt;
    &lt;ons-list-item&gt;
        &lt;div class="center"&gt;
            &lt;span class="list-item__title"&gt;任务 2&lt;/span&gt;
            &lt;ons-progress-bar id="task2Progress" value="45" style="margin-top: 5px;"&gt;&lt;/ons-progress-bar&gt;
        &lt;/div&gt;
        &lt;div class="right"&gt;
            &lt;span style="color: #666;"&gt;45%&lt;/span&gt;
        &lt;/div&gt;
    &lt;/ons-list-item&gt;
    &lt;ons-list-item&gt;
        &lt;div class="center"&gt;
            &lt;span class="list-item__title"&gt;任务 3&lt;/span&gt;
            &lt;ons-progress-bar value="0" style="margin-top: 5px;"&gt;&lt;/ons-progress-bar&gt;
        &lt;/div&gt;
        &lt;div class="right"&gt;
            &lt;span style="color: #999;"&gt;等待中&lt;/span&gt;
        &lt;/div&gt;
    &lt;/ons-list-item&gt;
&lt;/ons-list&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
// 模拟任务 2 的进度更新
setInterval(function() {
    var task2Progress = document.getElementById('task2Progress');
    if (task2Progress) {
        var value = parseInt(task2Progress.value);
        if (value &lt; 100) {
            task2Progress.value = value + 1;
        }
    }
}, 1000);
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">自定义样式</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-progress-bar value="70" secondary-value="85"></ons-progress-bar>
                </p>
                <p style="color: #666; font-size: 14px; margin-top: 5px;">
                    主进度 70% / 次要进度 85%
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('custom-style-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-custom-style-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-custom-style-code" onclick="event.stopPropagation(); copyCode('custom-style-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-custom-style-code">
                <pre><code id="code-content-custom-style-code">&lt;!-- HTML --&gt;
&lt;ons-progress-bar value="70" secondary-value="85"&gt;&lt;/ons-progress-bar&gt;

&lt;!-- 说明 --&gt;
&lt;!-- value: 主进度值 (0-100) --&gt;
&lt;!-- secondary-value: 次要进度值，用于显示缓冲进度等 --&gt;</code></pre>
            </div>
        </div>

        <div style="margin-top: 30px; padding: 20px; background-color: #f5f5f5; border-radius: 8px;">
            <h4>使用场景</h4>
            <ul style="color: #666; line-height: 1.8; margin: 10px 0; padding-left: 20px;">
                <li>文件上传/下载</li>
                <li>数据加载</li>
                <li>任务处理</li>
                <li>表单提交</li>
            </ul>
        </div>
    </div>

    <script>
        var downloadInterval;
        var currentProgress = 0;

        function startDownload() {
            var progressBar = document.getElementById('downloadProgress');
            var progressText = document.getElementById('progressText');
            var startBtn = document.getElementById('startBtn');
            var stopBtn = document.getElementById('stopBtn');
            
            startBtn.disabled = true;
            stopBtn.disabled = false;
            currentProgress = 0;
            
            downloadInterval = setInterval(function() {
                currentProgress += Math.random() * 10;
                if (currentProgress >= 100) {
                    currentProgress = 100;
                    clearInterval(downloadInterval);
                    startBtn.disabled = false;
                    stopBtn.disabled = true;
                    
                    ons.notification.toast('下载完成！', {
                        timeout: 2000
                    });
                }
                
                progressBar.value = currentProgress;
                progressText.textContent = Math.round(currentProgress) + '%';
            }, 500);
        }

        function stopDownload() {
            if (downloadInterval) {
                clearInterval(downloadInterval);
                document.getElementById('startBtn').disabled = false;
                document.getElementById('stopBtn').disabled = true;
                
                ons.notification.toast('下载已停止', {
                    timeout: 1500
                });
            }
        }

        // 模拟任务 2 的进度更新
        setInterval(function() {
            var task2Progress = document.getElementById('task2Progress');
            if (task2Progress) {
                var value = parseInt(task2Progress.value);
                if (value < 100) {
                    task2Progress.value = value + 1;
                }
            }
        }, 1000);
    </script>
    <script src="../js/code-display.js"></script>
</ons-page>
